<template>
    <div class="section-wrap">
        <!-- 头部 -->
      <div class="headerBox">
        <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>违章详情
        </div>
      </div>
        <div class="form-section" style="margin-bottom: 0;padding-top:40px;" v-if="list!={}">
            <div class="form-item form-item-style1" style="height: auto;padding: 10px 10px 10px 0px;">
                <div class="label-title" style="line-height: normal;">
                    <label>项目名称</label>
                </div>
              <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                {{list.departName}}
              </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目管理单位</label>
                </div>
                {{list.panrentDepartName}}
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>业主项目经理</label>
                </div>
                <div class="input_div">
                    {{list.charge}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章登记人</label>
                </div>
                <div class="input_div">
                  {{list.weizRegisterPerson}}
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章时间</label>
                </div>
                <div v-if="list.weizDate" class="input_div">
                  {{list.weizDate.substring(0,10)}}
                </div>
            </div>
            <div class="form-item form-item-style1" style="height: auto;padding: 10px 10px 10px 0px;">
                <div class="label-title" style="line-height: normal;">
                    <label>违章人员名称</label>
                </div>
                <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                  {{list.weizPersonName}}
                </div>
            </div>
          <div class="form-item form-item-style1"  style="height: auto;padding: 10px 10px 10px 0px;">
            <div class="label-title" style="line-height: normal;">
              <label>违章地点</label>
            </div>
            <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
              {{list.weizAddress}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>违章人员所属参建单位</label>
            </div>
            <div class="input_div">
              {{list.weizPersonDepartName}}
            </div>
          </div>
          <div  class="form-item form-item-style1"  style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 0px;">
            <div class="label-title" style="display: block;line-height: normal;">
              <label>违章图片</label>
            </div>
            <div style="float:left;display: flex;flex-wrap: wrap;">
              <img  v-for='item3 in list.projectImgList' :key="item3.id" :src="item3.url" alt="" @click="previewImg(item3.url)" style="width:80px;height:80px;margin-right:10px;">
            </div>

          </div>

          <div class="form-item form-item-style1" style="height: auto;padding: 10px 10px 10px 0px;">
            <div class="label-title" style="line-height: normal;">
              <label>违章现象</label>
            </div>
            <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
              {{list.weizPhenItemListName}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>违章编号</label>
            </div>
            <div class="input_div">
              {{list.weizNo}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>违章标准编号</label>
            </div>
            <div class="input_div">
              {{list.weizPhenItemListNo}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>违章整改期限</label>
            </div>
            <div v-if="list.weizAbarbeitungStartDate||list.weizAbarbeitungEndDate" class="input_div" style="font-size:16px;">
              {{list.weizAbarbeitungStartDate.substring(0,10)}}到{{list.weizAbarbeitungEndDate.substring(0,10)}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>违章验收单位</label>
            </div>
            <div class="input_div">
              {{list.weizCheckDepartName}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>违章验收人员</label>
            </div>

              {{list.weizCheckPersonName}}

          </div>
          <template v-for="(item,idx) in list.rectifyList">
            <div class="zhenggai" v-if="idx < zgInfoLength">
              <div class="info_div3">
                  <p>违章整改信息(整改第{{idx+1}}次)</p>
              </div>
              <div class="member_div">
                  <ul class="member_list">
                          <li class="form-item form-item-style1">
                              <div class="label-title">
                                  <label>违章整改责任人</label>
                              </div>
                              <div class="input_div">
                                {{list.weizCheckZrrName}}
                              </div>
                          </li>
                          <li class="form-item form-item-style1" style="border-bottom: none;">
                              <div class="label-title">
                                  <label>整改完成时间</label>
                              </div>
                              <div class="input_div" v-if="item.rectifydate">
                                {{item.rectifydate.substring(0,10)}}
                              </div>
                          </li>
                    <li  class="form-item form-item-style1"  style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 0px;">
                      <div class="label-title" style="display: block;line-height: normal;">
                        <label>整改后图片</label>
                      </div>
                      <div style="float:left;display: flex;flex-wrap: wrap;">
                        <img  v-for='item3 in item.rectifyImgList' :key="item3.id" :src="item3.url" alt="" @click="previewImg(item3.url)" style="width:80px;height:80px;margin-right:10px;">
                      </div>

                    </li>

                        <li class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 0px;" >
                          <div class="label-title" style="line-height: normal;">
                            <label>整改情况回复</label>
                          </div>
                          <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                          {{item.rectifydateRemark}}
                          </div>
                        </li>
                  </ul>
              </div>
            </div>
            <div class="yanshou" v-if="idx < ysInfoLength">
            <div class="info_div3">
              <p>违章验收信息(验收第{{idx+1}}次)</p>
            </div>

            <div class="member_div">
              <ul class="member_list">
                <li class="form-item form-item-style1">
                  <div class="label-title">
                    <label>违章验收人员</label>
                  </div>
                  <div class="input_div">
                    {{list.weizCheckPersonName}}
                  </div>
                </li>
                <li class="form-item form-item-style1" style="border-bottom: none;">
                  <div class="label-title">
                    <label>验收时间</label>
                  </div>
                  <div class="input_div" v-if="item.checkdate">
                    {{item.checkdate.substring(0,10)}}
                  </div>
                </li>
                <li class="form-item form-item-style1" style="border-bottom: none;">
                  <div class="label-title">
                    <label>违章验收结论</label>
                  </div>
                  <div class="input_div">
                    {{item.checkResults}}
                  </div>
                </li>
                <li class="form-item form-item-style1" style="border-bottom: none;">
                  <div class="label-title">
                    <label>违章验收方式</label>
                  </div>
                  <div class="input_div">
                    {{item.checkMode}}
                  </div>
                </li>
                <li  class="form-item form-item-style1"  style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 0px;">
                  <div class="label-title" style="display: block;line-height: normal;">
                    <label>验收图片</label>
                  </div>
                  <div style="float:left;display: flex;flex-wrap: wrap;">
                    <img  v-for='item3 in item.checkImgList' :key="item3.id" :src="item3.url" @click="previewImg(item3.url)" alt="" style="width:80px;height:80px;margin-right:10px;">
                  </div>

                </li>

                <li class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 0px;">
                  <div class="label-title" style="line-height: normal;">
                    <label>违章验收意见</label>
                  </div>
                  <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                    {{item.checkIdea}}
                  </div>
                </li>
              </ul>
            </div>
            </div>
          </template>
        </div>
        <el-dialog :visible.sync="flag"  fullscreen center>
          <img :src="selectImg" alt="" width="100%">
        </el-dialog>
        </div>
</template>
<script>
import treeClassify from "@commonComponents/treeClassify";
export default {
  data() {
    return {
      selectImg: '',
      flag: false,
      zgInfoLength: 0,
      ysInfoLength: 0,
      list:{},
      selectImg:'',
      flag: false,
      divisionIndex: 0,

    };
  },
  components: {
    treeClassify
  },
  created() {
    this.getInfo();
  },
  methods: {
    previewImg(url){//图片预览
      this.selectImg=url
      this.flag=true
    },
    getInfo() {
      let id = this.$route.query.id;
      this.$axiosAjax
        .haveRegBreakGet({ id: id })
        .then(res => {
          if (res.data.success == true) {
            var arr=[]
           this.list = res.data.result
           if (this.list.status == '1') {
             this.zgInfoLength = this.list.rectifyList.length - 1;
             this.ysInfoLength = this.list.rectifyList.length - 1;
           } else if (this.list.status == '2') {
             this.zgInfoLength = this.list.rectifyList.length;
             this.ysInfoLength = this.list.rectifyList.length - 1;
           } else {
             this.zgInfoLength = this.list.rectifyList.length;
             this.ysInfoLength = this.list.rectifyList.length;
           }
            console.log(this.list)
          }
        })
        .catch(err => {});
    },
    goBack() {
      this.$router.go(-1);
    },
    selectDivision(index){
        this.divisionIndex=index;
    }
  }
};
</script>
<style lang="less" scoped>
.form-item {
  .input_div {
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 17px;
    }
  }
}
.info_div3 {
  height: 55px;
  line-height: 45px;
  padding: 0 20px;
  border-top: 10px solid #ebeef2;
  p {
    float: left;
    color: #469b7a;
    font-size: 16px;
    font-weight: bold;
  }
  .vux-x-icon {
    fill: #999;
    float: right;
    margin-top: 12px;
  }
}
.member_div {
  .member_list {
    li {
      border-top: 1px solid #ebeef2;
    }
    .member1 {
      color: #ff0000;
    }
    .member2 {
      color: #15bd84;
    }
  }
}
.notice_div {
  border-top: 10px solid #ebeef2;
  padding-left: 20px;
  .notice_top {
    border-bottom: 1px solid #ebeef2;
    height: 45px;
    line-height: 44px;
    padding-right: 20px;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 12px;
    }
  }
  .notice_list {
    li {
      justify-content: space-between;
      border-bottom: 1px solid #ebeef2;
      height: 55px;
      padding-right: 20px;
      label {
        display: block;
        float: left;
        height: 54px;
        font-weight: bold;
        font-size: 14px;
        color: #333;
        line-height: 54px;
      }
      .notice_item {
        float: right;
        .notice_number {
          background: #469b7a;
          color: #fff;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          display: inline-block;
          text-align: center;
          line-height: 16px;
          font-size: 12px;
          margin-top: 19px;
        }
        .vux-x-icon {
          fill: #999;
          float: right;
          margin-top: 16px;
        }
      }
    }
    li:last-child {
      border-bottom: none;
    }
  }
}
.details {
  border-top: 10px solid #ebeef2;
  .details_top {
    border-bottom: 1px solid #ebeef2;
    height: 45px;
    line-height: 44px;
    padding-right: 20px;
    margin-left: 20px;
    background: #fff;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 12px;
    }
  }
  .details_list {
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 16px;
    }
    li {
      > div {
        height: 54px;
        line-height: 54px;
        padding-right: 20px;
      }
    }
    > li {
      justify-content: space-between;
      padding-left: 20px;
      border-bottom: 5px solid #ebeef2;
      > div {
        font-weight: bold;
        font-size: 16px;
      }
      .list_2 {
        li {
          border-top: 1px solid #ebeef2;
          > div {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
      .list_3 {
        li {
          font-size: 14px;
          text-indent: 2em;
          height: 55px;
          line-height: 54px;
          border-top: 1px solid #ebeef2;
          padding-right: 20px;
        }
      }
    }
  }
}
.btns_div {
  background: #ebeef2;
  padding: 30px 20px 55px;
  justify-content: space-between;
  display: flex;
  a {
    height: 40px;
    border-radius: 20px;
    display: inline-block;
    width: 140px;
    text-align: center;
    line-height: 40px;
    color: #fff;
  }
  .saveBtn {
    background: #469b7a;
  }
  .submitBtn {
    background: #15bd84;
  }
}
.add_btn {
  position: fixed;
  height: 62px;
  width: 62px;
  right: 30px;
  bottom: 35px;
}
</style>
